<template>
  <div id="bottomfix">

    <van-popup teleport="#bottomfix" safe-area-inset-bottom v-model="show" close-icon-position="top-left"
      position="bottom" :overlay=false duration="0.3"
      :style="{ backgroundColor: '#ffffff', boxShadow: 'rgb(204 204 204) 0px 4px 0.3rem', color: '#191919', position: 'fixed', bottom: '0px' }">

      <!-- <transition name="fade2"> -->


      <div class="changhtml" v-show="change == 2" @click.stop="">
        <div style="text-align: center;">
          <p class="partNum">

          </p>
          <div class="press">
            <!-- <i class="iconfont icon-yuyinjiantou"></i>  -->
            <span class="fontA">A-</span>
            <slot name="fsnum">
              <van-slider step="0.01" min="0.3" max="1.6" bar-height="4px" active-color="#ee0a24" />
            </slot>
            <!-- <i class="iconfont icon-yuyinjiantou"></i>   -->
            <span class="fontA">A+</span>
          </div>
          <van-divider />
          <div class="fontbgcolor">
            <div class="box" v-for=" ( item, index )  in bgcolorArr" :style="{ backgroundColor: item }"
              @click="$store.commit('CHANGDE_INDEX', index)"
              :class="{ selectbox: $store.getters.XselecedIndex == index, }">

              <i v-show="$store.getters.XselecedIndex == index" class="iconfont icon-icon_669"> </i>
            </div>
          </div>

        </div>




      </div>
      <!-- </transition> -->
      <!-- 进度条 -->
      <!-- <transition name="fade2"> -->
      <div class="changhtml" v-show="change == 1" @click.stop="">
        <div style="text-align: center;">
          <slot name="partNum">
            <p class="partNum">
              章节2 | 1.1%

            </p>
            <div class="press">
              <div class="inner"> <i class="iconfont icon-yuyinjiantou"></i> </div>

              进度条

              <div lass="inner"> <i class="iconfont icon-yuyinjiantou"></i> </div>

            </div>
          </slot>
          <van-divider />


        </div>




      </div>
      <!-- </transition> -->

      <!--  底部菜单 -->
      <div class="bottomment flex">

        <div class="dot" @click.stop="$emit('leftchangde')">
          <svg t="1678709676168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2795" width="30" height="30">
            <path
              d="M170.666667 213.333333h682.666666v85.333334H170.666667V213.333333z m0 512h682.666666v85.333334H170.666667v-85.333334z m0-256h682.666666v85.333334H170.666667v-85.333334z"
              fill="#2c2c2c" p-id="2796"></path>
          </svg>
          <br>

        </div>
        <div class="dot" @click.stop="change = 1">
          <svg t="1678709794277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4765" width="30" height="30">
            <path
              d="M640 736a128 128 0 0 1 123.968 96H960v64l-196.032 0.064A128 128 0 0 1 640 992H576a128 128 0 0 1-123.968-95.936L64 896v-64h388.032A128 128 0 0 1 576 736h64z m0 64H576a64 64 0 0 0-7.488 127.552L576 928h64a64 64 0 0 0 0-128zM384 384a128 128 0 0 1 123.968 96H960v64l-452.032 0.064A128 128 0 0 1 384 640H320a128 128 0 0 1-123.968-95.936L64 544v-64h132.032A128 128 0 0 1 320 384h64z m0 64H320a64 64 0 0 0-7.488 127.552L320 576h64a64 64 0 1 0 0-128z m320-416A128 128 0 0 1 827.968 128H960v64l-132.032 0.064A128 128 0 0 1 704 288h-64a128 128 0 0 1-123.968-95.936L64 192V128h452.032A128 128 0 0 1 640 32h64z m0 64h-64a64 64 0 0 0-7.488 127.552L640 224h64a64 64 0 0 0 0-128z"
              fill="#2C374D" p-id="4766"></path>
          </svg>
          <br>

        </div>
        <div class="dot" @click.stop="change = 2">
          <svg t="1678709881940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="9126" width="30" height="30">
            <path
              d="M609.28 232.32H152.96V404.48h100.48V332.8h127.36v417.92H306.56v100.48h249.6v-100.48H481.28V332.8h128v71.68h100.48V232.32H609.28z"
              fill="#231815" p-id="9127"></path>
            <path
              d="M812.8 492.16H547.84v99.84h58.24V550.4h74.24v242.56h-42.88v58.24H782.08v-58.24h-43.52V550.4h74.24v41.6h58.24V492.16h-58.24z"
              fill="#231815" p-id="9128"></path>
          </svg>
          <br>

        </div>
        <div class="dot" @click.stop="$store.commit('CHANGE_YE')">
          <i v-show="$store.getters.getye" class="iconfont icon-yejian"> </i>
          <!-- <i   class="iconfont icon-rijianmoshixhdpi"> </i> -->
          <svg v-show="!$store.getters.getye" t="1669893686090" class="icon" viewBox="0 0 1025 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="1190" width="30" height="30">
            <path
              d="M512.640801 798.010847a289.001252 289.001252 0 1 1 288.14685-289.001252A289.428452 289.428452 0 0 1 512.640801 798.010847z m0-513.922403a224.921151 224.921151 0 1 0 224.06675 224.921151A225.134752 225.134752 0 0 0 512.640801 284.088444zM274.476429 291.564456a32.04005 32.04005 0 0 1-21.360034-8.544014L178.142678 213.600334a32.04005 32.04005 0 0 1 43.788069-46.778473l74.546516 69.847309a32.04005 32.04005 0 0 1-21.360033 55.322486zM64.0801 536.991239a32.04005 32.04005 0 0 1 0-64.0801L165.113058 469.920734a32.04005 32.04005 0 0 1 1.922403 64.0801l-101.887359 3.204005zM190.958698 856.110138a31.82645 31.82645 0 0 1-23.496036-53.827284l69.847309-74.546517a32.25365 32.25365 0 0 1 45.283271-1.495202 31.82645 31.82645 0 0 1 1.495202 45.283271L213.600334 846.070922a32.25365 32.25365 0 0 1-22.641636 10.039216zM506.232791 992.17355A32.04005 32.04005 0 0 1 474.192741 961.201502l-3.204005-101.887359a32.04005 32.04005 0 1 1 64.0801-2.136004l3.417605 102.10096a32.25365 32.25365 0 0 1-31.185648 33.108052zM825.35169 865.294952a31.399249 31.399249 0 0 1-21.360034-8.757614l-74.546516-69.847309a32.04005 32.04005 0 0 1 44.001669-46.564873l74.332916 69.84731a31.82645 31.82645 0 0 1 0.854401 44.428869 32.680851 32.680851 0 0 1-23.282436 10.893617zM859.100542 553.224864a32.04005 32.04005 0 0 1 0-64.0801l102.10096-3.204005a32.04005 32.04005 0 0 1 2.136003 64.0801l-102.100959 3.204005zM764.475594 305.448477a32.25365 32.25365 0 0 1-21.360033-8.757613 31.82645 31.82645 0 0 1-1.495202-45.283271L811.681268 177.074677a32.04005 32.04005 0 1 1 46.778473 43.788068l-69.847309 74.332916a32.04005 32.04005 0 0 1-24.136838 10.252816z"
              p-id="1191" fill="#black"></path>
            <path
              d="M522.252816 196.939508A31.82645 31.82645 0 0 1 491.280768 165.967459L487.008761 64.0801a32.04005 32.04005 0 0 1 31.185649-32.894451A31.399249 31.399249 0 0 1 551.088861 61.944097l4.272007 102.100959a31.82645 31.82645 0 0 1-32.04005 32.894452z"
              p-id="1192" fill="#ffffff"></path>
          </svg>
          <br>
          <!-- {{ $store.getters.getye ? 'dark' : 'lignt' }} -->

        </div>


      </div>
    </van-popup>


  </div>
</template>

<script>
export default {

  props: ['show', 'fontSize', 'bgcolorArr', 'selecedIndex'],
  data() {
    return {
      change: 0
      ,
      ye: true
    }
  },
  watch: {
    show() {
      this.change = 0
    }
  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.bottomment {
  padding: 0.5rem 0 0.5rem;
  background-color: #fff;
  overflow: hidden;
  height: 1rem;
  color: #191919;
  text-align: center;

  .iconfont {
    font-size: 0.8rem;
  }
}

.partNum {
  color: #1e1e1e;
  margin: 0.3rem;
}

.box {
  width: 1.8rem;
  height: 0.8rem;
  border: 1px solid #ffff;
  border-radius: 5px;
  border: 1.5px solid #191919;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.fontbgcolor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 0.3rem;
  overflow: hidden;
  height: 0.8rem;


  .selectbox {
    border: 1.5px solid #850108
  }

  .selectbox::after {
    width: 100%;
    height: 100%;


  }

  .icon-icon_669 {
    font-size: 0.6rem;
    color: #ed424b;
    font-weight: 800;

  }

}

.iconye {
  width: 0.3rem;
  background-color: #850108;

}

.press {
  display: flex;
  align-items: center;

  .icon-yuyinjiantou {
    font-size: 1.5rem;
    color: #ffff;
  }

  .fontA {
    font-size: 0.7rem;
    color: #1e1e1e;
    margin: 0 0.6rem;
  }

  .inner:nth-child(1) {
    transform: rotate(90deg);
  }



}
</style>